<!--教程文章详情页-->
{% load comments_tags %}
{% load myfilters_and_tags %}
{% load User_tags %}
{% load blog_extras %}
{% load staticfiles %}

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--blog自适应样式-->
    <link rel="stylesheet" type="text/css" href="/static/css/responsive.css">
    <!--Font Awesome 图标web link-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <!-- 标题栏logo-->
    <link rel="icon" href="/static/images/logo.ico" type="image/x-icon">
    <!-- 收藏夹logo-->
    <link rel="shortcut icon" href="/static/images/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="{% static 'css/article_detail.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">


    {% block csslink %}

    {% endblock %}

    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %} 教程 {% endblock %}</title>


    {% block css %}

    {% endblock %}

    <style>
        .article {

            border: 0.5px solid #ebebeb;
            background-color: #fff;
            border: 5px;
            border-radius: 10px;
        }
        ul li a{
            color: darkgray;
        }
        ul li a:hover{
            font-size: 20px;
        }
    </style>
</head>

<body>

{% block header %}
    <header id="mu-header" class="" role="banner">
        <div class="container">
            <nav class="navbar navbar-default mu-navbar">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!-- Text Logo -->
                        <a class="navbar-brand" href="/">菜根譚</a>
                        <!-- Image Logo -->
                        <!-- <a class="navbar-brand" href="#"><img src="assets/images/logo.png"></a> -->
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                        <ul class="nav navbar-nav mu-menu navbar-right">
                            <li><a href="{% url 'blog:index' %}">首页</a></li>
                            <li><a href="{% url 'course:course_list' %}">教程</a></li>
                            {% for category in bigcategory_list %}
                                <li><a href="{% url 'article:bigcategory' category.slug %}">{{ category.name }}</a></li>
                            {% endfor %}

                            <li>
                                {% if user.is_authenticated %}
                                    <a href="{% url 'myaccount:profile' %}" title="{{ user.username }}">
                                        <span class="glyphicon glyphicon-user" aria-hidden=" true"></span>
                                    </a>
                                {% endif %}

                                {% if not user.is_authenticated %}
                                    {#                                <a href="{% url 'login_url' %}" title="登录">#}
                                    <a href="{{ login_url }}" title="登录">
                                        <span class="glyphicon glyphicon-log-in  aria-hidden=" true"></span>
                                    </a>
                                {% endif %}
                            <li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </header>
{% endblock %}


{% block banner %}

    <banner class='banner'>
        <div id="mu-featured-slider">
            <div class="header-banner">
            </div>
        </div>
    </banner>


{% endblock %}

<section class="container-fluid" id="section" style="display: flex;flex-direction:row">
    <div class="col-md-3" style="justify-content: flex-start; background-color: #fff;border-radius: 10px;margin-top:10px;">
        <ul style="margin-top:10px;">
            {% for course_article in course_article_list %}
                <li><a href="{% url 'article:course_detail' course_article.pk %}">* {{ course_article.title }}</a></li>
            {% endfor %}
        </ul>
    </div>

    <div class="col-md-7 " style="justify-content: center;">

        <div class="article">
            <h1 class="arcicle-title text-center">
                <a href="">{{ article.title }}</a>
            </h1>

            <div class="infom text-center">
                <span>{{ article.created_time | date:"Y-m-j" }}</span>
                <small>&#32;•&#32;</small>
                <span>{{ article.views }}&#32;阅读</span>
                <small>&#32;•&#32;</small>
                        <span>
                             <a href="#comment-area">{{ article.comment_set.count }} 评论</a>
                        </span>
            </div>
            <div id="markdown">
                {{ article.body|safe }}
            </div>

        </div>
        <!-- 评论 -->
        <div class="comment" id="comment-area" style="border-radius: 10px;margin-top:10px;">
            <div class="hint">
                <div class="pull-left">{% get_comment_count article.id as commentscount %}{{ commentscount }}&#8197;评论
                </div>
                <div class="pull-right">
                    {% if user.is_authenticated %}
                        {{ user.username }}
                    {% else %}
                        <a id="unauthenticated" href="{% url 'accounts:mylogin' %}" target="view_window">未登录用户</a>
                    {% endif %}
                </div>
            </div>
            <div class="Commentbox ">
                <div class="headsculpture">
                    <img {% if user.is_authenticated %} src="{{ user.avatar.url }}" {% else %}
                                                        src="\media\avatar\default.png" {% endif %} />
                </div>
                <!-- form表单 -->
                <form method="POST" action="" novalidate='novalidate'>
                    {% csrf_token %}
                    <!-- form隐藏信息 -->
                    <div class="comt-tips pull-right">
                        <input type='hidden' name='comment_post_ID' value='{{ article.id }}' id='comment_post_ID'/>
                        <input type='hidden' name='comment_parent' id='comment_parent' value='0'/>
                        <input type='hidden' name='comment_author' value='{{ user.username }}' id='comment_author'/>
                    </div>
                    <div class="ctextarea">
                        <textarea class="form-control" rows="4" name="arciclecomment"></textarea>
                    </div>
                    <button id="arciclecommentb" type="button" class="btn btn-success">提交评论</button>
                    <a href="https://guides.github.com/features/mastering-markdown/"
                       class="glyphicon glyphicon-info-sign" target="view_windown">&#8197;支持Markdown</a>
                </form>
            </div>
            <!-- 评论区 -->
            <div class="Commentlist">
                <!-- 每个父级评论 -->
                {% get_parent_comments article.id as comments %}
                {% for comment in comments %}
                    <div class="comments-item">
                        <div class="pull-left">
                            <img class="avatar-32" src="{{ comment.author.avatar.url }}">
                        </div>
                        <div class="comments-content">
                            <div class="comment-trigger">
                                <strong>{{ comment.author.username }}</strong>
                                <span class="comments-isAuthor">·</span>
                                <span class="comments-date">{{ comment.create_date | date:"Y-m-j" }}</span>
                            </div>
                            <div style="width: 100%">
                                <div id="markdown" class="commentsmd">
                                    <!--django自定义模板语言，转为md-->
                                    {% content_to_markdown comment.content as content %}
                                    {{ content |safe }}
                                </div>
                            </div>
                            <div class="comment-reply">
                                {#                    <a href="javascript:void(0);" class="glyphicon glyphicon-thumbs-up">&#8197;赞&nbsp;</a>#}
                                <a class="replyclick" href="javascript:void(0);">回复</a>
                            </div>
                        </div>
                        <div class="reply-form">
                            <form class="replyform hidden" method="POST" novalidate='novalidate'>
                                <!-- form隐藏信息 -->
                                <div class="comt-tips pull-right">
                                    <input type='hidden' name='comment_post_ID' value='{{ article.id }}'
                                           id='comment_post_ID'/>
                                    <input type='hidden' name='comment_author' value='{{ user.username }}'
                                           id='comment_author'/>
                                    <input type='hidden' name='comment_parent' id='comment_parent'
                                           value='{{ comment.id }}'/>
                                    <input type='hidden' name='comment_rep' id='comment_rep' value='{{ comment.id }}'/>
                                </div>
                                <button class="btn btn-default pull-right usercommentb" type="button">添加回复</button>
                                <div class="form-group">
                                    <textarea class="form-control replyinput" name="arciclecomment" rows="1"
                                              placeholder="回复"></textarea>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- 子集评论 -->
                    <div class="reply-list">
                        {% get_child_comments comment.id as childcomments %}
                        {% for childcomment in childcomments %}
                            <!-- 每个子集评论 -->
                            <div class="reply-item">
                                <div class="reply-content">
                                    <div id="markdown" class="repaymd">
                                        {% content_to_markdown childcomment.content as content %}
                                        {{ content |safe }}
                                    </div>
                                    <div class="reply-trigger">
                                        <span>—&#8197;<strong>{{ childcomment.author.username }}</strong>&#8197;&#8197;回复&#8197;&#8197;<strong>{{ childcomment.rep_to.author.username }}</strong></span>
                                        <span class="comments-date">· {{ childcomment.create_date| date:"Y-m-j" }}</span>
                                        <a class="replyclick" href="javascript:void(0);">&#8197;回复</a>
                                    </div>
                                </div>
                                <div class="reply-form">
                                    <form class="replyform hidden" method="POST" novalidate='novalidate'>
                                        <!-- form隐藏信息 -->
                                        <div class="comt-tips pull-right">
                                            <input type='hidden' name='comment_post_ID' value='{{ article.id }}'
                                                   id='comment_post_ID'/>
                                            <input type='hidden' name='comment_author' value='{{ user.username }}'
                                                   id='comment_author'/>
                                            <input type='hidden' name='comment_parent' id='comment_parent'
                                                   value='{{ comment.id }}'/>
                                            <input type='hidden' name='comment_rep' id='comment_rep'
                                                   value='{{ childcomment.id }}'/>
                                        </div>
                                        <button class="btn btn-default pull-right usercommentb" type="button">添加回复
                                        </button>
                                        <div class="form-group">
                                            <textarea class="form-control replyinput" name="arciclecomment" rows="1"
                                                      placeholder="回复"></textarea>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>


    </div>

    <div class="col-md-2" style="justify-content: flex-end; position: fixed;right: 0; background-color: #fff; height: 100px; border-radius: 10px; margin-top:10px;">

        <div class="catalog ">
            <div>
                <span>目录</span>
                <p>
                    {{ article.toc|safe }}
                </p>
                <a href="javascript:void(0);" class="top">返回顶部</a>
            </div>

        </div>
    </div>
</section>

{% block footer %}
    <!--footer-->
    <footer class="footerbg">
        基于Django构建 © 2020
        |
        菜根譚&#8197;版权所有
        |
        <a href="http://www.miitbeian.gov.cn">渝ICP备19006782号-1</a
        |
        <a href="/sitemap.xml" title="Sitemap" target="_blank">网站地图</a>

    </footer>

{% endblock %}

<!--返回顶部--->
<div class="fixedTools hidden">
    <a id='backtop' class="fa fa-arrow-up"></a>
</div>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% block js %} {% endblock %}


<script type="text/javascript">


    (function ($) {

        /*———————————————————————————————底部信息栏(需完善)——————————————————————————————————*/
        var viewH = $(window).height(); //浏览器高度
        var viewW = $(window).width(); //浏览器宽度
        var scroH = $(document).scrollTop(); //滚动高度
        var contentH = $(document).height(); //内容高度
        var _bh = $(document.body).height(); //内容body高度

        if (contentH > viewH) {//初始判断
            $('.footerbg').removeClass('fixed');
        } else if (contentH = viewH) {
            $('.footerbg').addClass('fixed');
        }
        if (viewW < 767) {//移动页面
            $('.footerbg').addClass('hidden');
        }
        jQuery(window).resize(function () {//实时
            var viewH = $(window).height(); //浏览器高度
            var contentH = $(document).height(); //内容高度
            if (contentH > viewH) {
                $('.footerbg').removeClass('fixed');
            } else if (contentH = viewH) {
                $('.footerbg').addClass('fixed');
            }

        });
        /*———————————————————————————————浏览器scroll滚动事件——————————————————————————————————*/
        $('.fixedTools').on('click', function () {
            $('body,html').animate({scrollTop: 0}, 300);
        });
        jQuery(window).bind('scroll', function () {
            /*出现导航栏与回到顶部*/
            if ($(window).scrollTop() > 200) {
                $('#mu-header').addClass('mu-fixed-nav');
                $('.fixedTools').removeClass('hidden');
            } else {
                $('#mu-header').removeClass('mu-fixed-nav');
                $('.fixedTools').addClass('hidden');
            }
        });

    })(jQuery);


    /*———————————————————————————————ajax左侧标签查询——————————————————————————————————*/
    function showHint(str) {
        var xmlhttp;
        // 1、创建 XMLHttpRequest 对象
        if (window.XMLHttpRequest) {
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 3、当服务器响应就绪时执行函数
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                STKeywordDict = JSON.parse(xmlhttp.responseText);
                var html = '';
                for (var item in STKeywordDict) {
                    html = html + '<a class="tag-icon label label-default">#' + STKeywordDict[item] + '</a>'
                }
                $('.search-tag').html(html);
            }
        };
        //2、把请求发送到服务器上的文件
        xmlhttp.open("POST", "/ajax/tag/", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send('STKeyword=' + str);
    }
</script>
</body>

</html>